<template>
	<view class="">
		<u-navbar back-text="发布动态" :borderBottom="false" :background="background" :back-text-style="{'color':'#fff'}"
			backIconColor="#fff"></u-navbar>
		<view class="ptb-30">
			<view class="plr">
				<textarea v-model="message" maxlength="1000" placeholder="输入内容（最多1000字）" class="w100"
					style="height: 450rpx;" />
			</view>
			<view class="item-box flex flex-wrap u-m-l-36 u-m-r-8">
				<view class="item upload u-m-t-20 relative" v-for="(item,i) in imgarr" :key="i"
					v-show="imgarr.length!=0">
					<image :src="item.img1" v-if=""></image>
					<image @click="del(i)" src="" class="absolute"
						style="width: 32rpx;height: 32rpx;top: 5rpx;right: 5rpx;" v-if=""></image>
				</view>
				<view class="item upload u-m-t-20" @click="getimg" v-show="imgarr.length < 9">
					<image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.51yuansu.com%2Fpic3%2Fcover%2F03%2F83%2F28%2F5c0e6433d40f9_610.jpg&refer=http%3A%2F%2Fpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1661929204&t=665cd087d76631960c0591768faf8109" v-if=""></image>
				</view>
			</view>
			<u-cell-item title="选择地址" :border-bottom="false" :value="address" @click="getAddress"></u-cell-item>
		</view>
	</view>
</template>

<script>
	// import {upload} from '../../common/common.js'
	export default {
		data() {
			return {
				message: '',
				imgarr: [],
				address: '请选择',
				longitude: '',
				latitude: '',
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
			}
		},
		onNavigationBarButtonTap() {
			if (!this.message.trim()) {
				uni.showToast({
					title: '请输入文字内容',
					icon: 'none'
				})
			} else if (this.imgarr.length == 0) {
				uni.showToast({
					title: '请上传图片',
					icon: 'none'
				})
			} else {
				let img = []
				this.imgarr.forEach(item => {
					img.push(item.img2)
				})
				this.$http('/api/dynamic/addDynamic', {
					content: this.message,
					img: img.join(','),
					lng: this.longitude,
					lat: this.latitude
				}, "POST").then(data => {
					uni.navigateBack()
					setTimeout(() => {
						uni.showToast({
							title: '发布成功',
						})
					}, 100)
				})
			}
		},
		methods: {
			getimg() {
				upload(9 - this.imgarr.length).then((arr) => {
					console.log(arr)
					this.imgarr.push(...arr)
				})
			},
			del(i) {
				this.imgarr.splice(i, 1)
			},
			getAddress() {
				var _this = this;
				uni.chooseLocation({
					success: function(res) {
						_this.address = res.address
						_this.longitude = res.longitude
						_this.latitude = res.latitude
					}
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-field {
		padding: 0 !important;
	}

	.upload {
		image {
			width: 200rpx;
			height: 200rpx;
		}
	}

	.item {
		border-radius: 60rpx;
		margin-right: 28rpx;
		width: calc((100% - 28rpx * 3) / 3);

		image {
			width: 100%;
			height: 200rpx;
			border-radius: 10rpx;
		}
	}

	// 给最外层的盒子添加伪元素，列不满则左对齐
	.item-box::after {
		content: "";
		flex: auto;
	}
</style>
